<template>
    <div class="registercom">
        <div class="register">
           <form @submit.prevent="register">
             <h1>用户注册</h1>
            <p>
                <input type="text" placeholder="输入账号" required v-model="uname">
            </p>
            <p>
                <input type="number" placeholder="输入手机号" required v-model="phone" pattern="/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/">
            </p>
            <p>
                <input type="email" placeholder="输入邮箱" required v-model="email" pattern="/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/">
            </p>
            <p>
                <input type="password" placeholder="输入密码" required v-model="pwd">
            </p>
            <p>
                <input type="password" placeholder="再次输入密码" required v-model="pwd2">
            </p>
            <p>
                 <input type="checkbox" v-model="isRem" required>
                <span>是否同意本系统服务条款</span>
            </p>
            <p>
                <input type="submit" value="注册">
            </p>
           </form>
           <button @click="zc()">注册账号</button>
        </div>
    </div>
</template>

<script>
export default {
    name:'RegisterCom',
    // 所有控件必填；两次密码必须一致===>添加数据到vuex里面
    // 用户自己去跳转
    data(){
        return{
          uname:'',
          phone:'',
          email:'',
          pwd:'',
          pwd2:'',
        }
    },
    methods:{
        register(){
           if(!this.Register()) return;

            const newUser ={
                uname: this.uname,
                phone:this.phone,
                email:this.email,
                password:this.pwd
            };
            this.$store.commit('register',newUser);
            alert('注册成功，即将返回登录页')
            this.$router.push('/login')
        },
        Register(){
            if(this.pwd !== this.pwd2){
                alert("两次密码输入不一致");
                return false;
            }
            return true
        }
    }
}
</script>

<style scoped>
.registercom{
    width: 100%;
    height: 98vh;
    overflow: hidden;
    background: orange;
}
.registercom .register{
  width: 50%;
  overflow: hidden;
  margin-top: 50%;
  padding-block-end: 2%;
  top: 30%;
  left: 25%;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  background: white;
}
.register{
    overflow: hidden;
    text-align: center;
}
.register button{
    width: 200px;
    overflow: hidden;
}
</style>